import * as React from 'react'
import api from '@/api'
import { Button, Modal } from 'antd'
import BaseTable from '@/pages/templates/base-table'
import CustomerAdd from './add'
import CustomerDetail from './detail'
import './styles.less'
import Receviers from './receivers'

class Customers extends BaseTable {
  state = {
    ...this.state,
    modalAdd: false,
    modalDetail: false,
    modalReceivers: false
    // currentEditData: {}
  }
  apiList = api.customer.list
  data = {
    searchParams: {
      searchParam: '',
      customerId: '',
      level: '',
      contact: ''
    }
  }
  searchColumns = [
    { title: '客户代码', type: 'text', key: 'customerId' },
    {
      title: '级别',
      type: 'select',
      key: 'level',
      options: [
        { value: '1', level: '①' },
        { value: '2', level: '②' },
        { value: '3', level: '③' },
      ]
    },
    { title: '专员', type: 'select', key: 'contact', options: [] }
  ]
  tableColumns = [
    {
      key: 'no',
      title: '序号',
      render: (data, context, index) => {
        return (this.state.curPage - 1) * 10 + index + 1
      }
    },
    { dataIndex: 'customer_id', title: '客户代码' },
    { dataIndex: 'componey_name', title: '公司名称' },
    { dataIndex: 'address', title: '地址' },
    { dataIndex: 'principal', title: '负责人' },
    { dataIndex: 'contact', title: '联系方式' },
    { dataIndex: 'main_business', title: '主要营业方向' },
    { dataIndex: 'comment', title: '备注' },
    {
      key: 'operate',
      title: '操作',
      render: (text, record, index) => {
        return (
          <span>
            <Button
              onClick={() => this.handleCheckReceview(record.customer_id)}
            >
              查看收货方
            </Button>
            <Button
              type="primary"
              onClick={() => this.handleDetailButton(record)}
            >
              详情
            </Button>
          </span>
        )
      }
    }
  ]

  handleCheckReceview(id) {
    this.setState({
      modalReceivers: true,
      customer_id: id
    })
  }
  handleAddOnSuccess() {
    this.setState({
      modalAdd: false
    })
    this.fetchData()
  }
  handleAddOnCancel() {
    this.setState({
      modalAdd: false
    })
  }
  handleDetailButton(data) {
    this.setState({
      modalDetail: true,
      detailId: data.order_code
    })
  }
  handleDetailOnSuccess() {
    this.setState({
      modalDetail: false
    })
    this.fetchData()
  }
  handleDetailOnClose() {
    this.setState({
      modalDetail: false
    })
  }
  renderOthers() {
    return (
      <div style={{ textAlign: 'right'}}>
        <Button
          type="primary"
          onClick={() => {
            this.setState({
              modalAdd: true
            })
          }}
        >
          新增
        </Button>
      </div>
    )
  }
  renderModals() {
    return (
      <div>
        <Modal
          visible={this.state.modalAdd}
          width={800}
          footer={null}
          title="客户新增"
          maskClosable={false}
          onCancel={this.handleAddOnCancel.bind(this)}
        >
          <CustomerAdd
            onSuccess={this.handleAddOnSuccess.bind(this)}
            onClose={this.handleAddOnCancel.bind(this)}
          />
        </Modal>
        <Modal
          visible={this.state.modalDetail}
          width={1100}
          footer={null}
          title="客户信息编辑"
          maskClosable={false}
          onCancel={this.handleDetailOnClose.bind(this)}
        >
          <CustomerDetail
            // wrappedComponentRef={form => (this.editForm = form)}
            id={this.state.detailId}
            onSuccess={this.handleDetailOnSuccess.bind(this)}
            onClose={this.handleDetailOnClose.bind(this)}
          />
        </Modal>
        <Modal
          visible={this.state.modalReceivers}
          width={1100}
          footer={null}
          title="收货方列表"
          maskClosable={false}
          onCancel={() => this.setState({ modalReceivers: false })}
        >
          <Receviers id={this.state.customer_id} />
        </Modal>
      </div>
    )
  }
}
export default Customers
